<template>
    <view class="market-item">
        <image :src="nft.img" mode="aspectFill"></image>
        <view class="content">
            <view class="h-80">
                <u-text
                    :text="nft.name"
                    size="28rpx"
                    color="#000000"
                    :lines="2"
                ></u-text>
            </view>
            <view class="seller-price" v-if="minMoney != maxMoney">
                <view class="text-1">
                    <u-text
                        :text="minMoney"
                        color="#356CE7"
                        bold
                        size="34rpx"
                        prefixIcon="rmb"
                        block
                        iconStyle="font-size: 26rpx; color: #356CE7; font-weight: bold;top: 10rpx;"
                    ></u-text>
                </view>
                <view class="seller-price-bl">~</view>
                <view class="text-1">
                    <u-text
                        :text="maxMoney"
                        :lines="1"
                        color="#356CE7"
                        bold
                        size="34rpx"
                        prefixIcon="rmb"
                        block
                        iconStyle="font-size: 26rpx; color: #356CE7; font-weight: bold;top: 10rpx;"
                    ></u-text>
                </view>
            </view>
            <view class="seller-price" v-else>
                <u-text
                    :text="maxMoney"
                    color="#356CE7"
                    bold
                    size="34rpx"
                    prefixIcon="rmb"
                    block
                    iconStyle="font-size: 26rpx; color: #356CE7; font-weight: bold;top: 10rpx;"
                ></u-text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index",
        props:{
            nft:{
                type: Object,
                default(){
                    return {}
                }
            },
            minMoney:{
                type:String | Number,
                default:''
            },
            maxMoney:{
                type:String | Number,
                default:''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .market-item {
        background: #ffffff;
        border-radius: 14rpx;
        overflow: hidden;
        image{
            display: block;
            width: 100%;
            // 默认设置一个图片的大约值
            height: 344rpx;
        }
        .content{
            padding: 20rpx 14rpx 26rpx 14rpx;
            .h-80 {
                height: 80rpx;
            }
            .seller-price {
                display: flex;
                align-items: center;
                margin-top: 12rpx;
                .seller-price-bl {
                    margin: 0 7rpx;
                    font-size: 26rpx;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #356CE7;
                }
            }
        }
    }
</style>
